<template>
	<view class="content fofa poRel" style="justify-content: space-between;">
		<tabnav title="补充签署方" :col="back"></tabnav>
		<view style="height: 40rpx;"></view>
		<view v-if="replenish.approverType == 'INDIVIDUAL'" class="wid90 mar bacFFF borRad20 box1" style="padding: 10rpx 0;">
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">证件类型</view>
				<picker @change="bindPickerChange" :value="replenish.idCardType" :range="xuanze">
					<view class="hei80 dis disAl disJuB foSi30">
						<view>{{xuanze[replenish.idCardType]}}</view>
						<uni-icons size="25" type="right"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">姓名</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.approveName" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">证件号</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="idcard" class="wid100" v-model="replenish.idCardNumber" placeholder="请输入证件号"/>
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">手机号</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="tel" class="wid100" v-model="replenish.phoneNumber" placeholder="请输入手机号"/>
				</view>
			</view>
		</view>
		<view v-if="replenish.approverType == 'ENTERPRISE'" class="wid90 mar bacFFF borRad20 box1" style="padding: 10rpx 0;">
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">企业名称</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.orgName" placeholder="请补充工商执照上的企业名称"/>
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">姓名</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.approveName" placeholder="请输入姓名"/>
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">手机号</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="tel" class="wid100" v-model="replenish.phoneNumber" placeholder="请输入手机号"/>
				</view>
			</view>
		</view>
		<view class="wid100 poAbs bacFFF dis disAl disJuC" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="height: 125rpx;bottom: 0;">
			<view class="hei80 dis disAl disJuC coFFF borRad10" @click="baocun"
				style="width: 400rpx;" :style="{'background-color':back}">确认并保存</view>
		</view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				paddingBottomHeight: 0,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				pdfurl: '',
				xuanze: ['居民身份证','港澳台居民居住证','港澳居民来往内地通行证'],
				replenish:{
					idCardType: 0,
					approveName: '',
					idCardNumber: '',
					phoneNumber: '',
					approverType: 'INDIVIDUAL',
					orgName: '',
					isPromoter: 1
				},
			}
		},
		onLoad(option) {
			var replenish = JSON.parse(option.replenish)
			if(replenish){
				replenish.idCardType = replenish.idCardType == 'ID_CARD'?0:replenish.idCardType == 'HONGKONG_MACAO_AND_TAIWAN'?1:2
				this.replenish = replenish
				console.log(this.replenish)
			}else{
				this.pdfurl = uni.getStorageSync('contract_detail')
				this.replenish.approverType = this.pdfurl.recipients[0].isPromoter?this.pdfurl.recipients[1].recipientType:this.pdfurl.recipients[0].recipientType
				this.replenish.recipientId = this.pdfurl.recipients[0].isPromoter?this.pdfurl.recipients[1].recipientId:this.pdfurl.recipients[0].recipientId
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		methods: {
			baocun(){
				var that = this
				var replenish = ''
				if(!that.replenish.approveName){
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return
				}
				if(!that.replenish.phoneNumber){
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					})
					return
				}
				if(that.replenish.approverType == 'INDIVIDUAL'){
					if(!that.replenish.idCardNumber){
						uni.showToast({
							title: '请输入证据号',
							icon: 'error'
						})
						return
					}
					replenish = {
						approveName: that.replenish.approveName,
						idCardType: that.replenish.idCardType==0?'ID_CARD':that.replenish.idCardType==1?'HONGKONG_MACAO_AND_TAIWAN':'HONGKONG_AND_MACAO',
						idCardNumber: that.replenish.idCardNumber,
						phoneNumber: that.replenish.phoneNumber,
						approverType: that.replenish.approverType,
						recipientId: that.replenish.recipientId,
						isPromoter: 1
					}
				}else if(that.replenish.approverType == 'ENTERPRISE'){
					if(!that.replenish.orgName){
						uni.showToast({
							title: '请补充企业名称',
							icon: 'error'
						})
						return
					}
					replenish = {
						approveName: that.replenish.approveName,
						phoneNumber: that.replenish.phoneNumber,
						orgName: that.replenish.orgName,
						approverType: that.replenish.approverType,
						recipientId: that.replenish.recipientId,
						isPromoter: 1
					}
				}
				uni.$emit('replenish', replenish)
				uni.navigateBack({delta: 1})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.replenish.idCardType = e.detail.value
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4F3F3;
	}
</style>